﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <title>用户中心</title>
    <link th:href="@{templates/base/bootstrap-3.3.5-dist/css/bootstrap.min.css}" href="../templates/base/bootstrap-3.3.5-dist/css/bootstrap.min.css" title="" rel="stylesheet"/>
    <!-- Favicon -->
    <link rel="shortcut icon" th:href="@{templates/img/favicon.ico}" href="../templates/img/favicon.ico">
    <!-- element-ui -->
    <!-- <link rel="stylesheet" type="text/css" href="https://unpkg.com/element-ui/lib/theme-default/index.css"> -->
    <link rel="stylesheet" type="text/css" th:href="@{templates/base/css/index.css}" href="../templates/base/css/index.css"/>
    <!-- iview -->
    <link rel="stylesheet" type="text/css" th:href="@{templates/base/css/iview.css}" href="../templates/base/css/iview.css"/>
    <!-- fakeLoader -->
    <link rel="stylesheet" type="text/css" th:href="@{templates/base/css/fakeLoader.css}" href="../templates/base/css/fakeLoader.css">
    <!-- color -->
    <link rel="stylesheet" type="text/css" th:href="@{templates/base/css/color.css}" href="../templates/base/css/color.css">
    <!-- iconfont -->
    <link rel="stylesheet" type="text/css" th:href="@{templates/base/iconfont/iconfont.css}" href="../templates/base/iconfont/iconfont.css"/>
    <link rel="stylesheet" type="text/css" th:href="@{templates/base/css/VanyFilter.css}" href="../templates/base/css/VanyFilter.css"/>
    <link rel="stylesheet" type="text/css" th:href="@{templates/index/css/cropper.css}" href="../templates/index/css/cropper.css"/>
    <link rel="stylesheet" type="text/css" th:href="@{templates/base/css/VanyBase.css}" href="../templates/base/css/VanyBase.css"/>
    <!-- topnav-->
    <link rel="stylesheet" type="text/css" th:href="@{templates/index/css/topnav.css}" href="../templates/index/css/topnav.css"/>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_745571_4j7hkp5tur8.css">
</head>

<body class="sb-l-o blue">
<div class="header-bar">
    <ul class="nav navbar-nav pull-right">
        <li class="dropdown li-border">
            <span style="line-height: 30px;display: inline-block;" th:utext="#{home.top.language}"></span>
        </li>
        <li class="dropdown li-border">
            <a id="userName" href="#" class="dropdown-toggle mystyle-color" data-toggle="dropdown">
                <span th:text="#{home.top.welcome}">欢迎</span>
                <span id="userNameAfterWelcome"></span>
                <!--<span class="caret"></span>-->
            </a>
            <ul class="dropdown-menu list-group dropdown-persist w250 login" role="menu" id="userinfo">
                <li class="list-group-item">
                    <el-button type="text" @click="personal">个人资料</el-button>
                </li>
                <li class="list-group-item">
                    <el-button type="text" @click="changePassword">修改密码</el-button>
                </li>
                <li class="dropdown-footer">
                    <el-button type="text" @click="logout" th:text="#{home.top.logout}">退出登录</el-button>
                </li>
            </ul>
        </li>
    </ul>
</div>
<div class="logo-bar">
    <img th:src="@{templates/img/logo3.png}" src="../templates/img/logo3.png" height="60px">
    <span th:text="#{home.top.name}">施耐德电气（中国）有限公司产品证书管理平台</span>
</div>
<nav class="nav navbar-default navbar-mystyle">
    <div class="navbar-header">
        <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand mystyle-brand"></a>
    </div>
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="li-border active">
                <a class="mystyle-color" href="javascript:void(0)" index="0" th:text="#{home.home}">首页</a>
            </li>
            <li class="li-border">
                <a class="mystyle-color" th:href="@{index}" href="../index" index="1" th:text="#{home.into-procurement-portal}">Into Procurement Portal</a>
            </li>
        </ul>
    </div>
</nav>
<div class="contentMainWrap">
    <style>
        /*main样式补充 S*/
        .contentMainWrap {
            position: relative;
            padding-left: 150px;
        }

        .headerPicWrap {
            position: absolute;
            left: 0;
            top: 0;
            width: 150px;
            height: 100%;
            padding: 20px;
        }

        .toolGatherWrap {
            width: 100%;
            height: 100%;
            padding: 10px;
        }

        .toolGatherWrap .item-tg {
            float: left;
            width: 50%;
            padding: 10px;
        }

        .home-panel {
            width: 100%;
            min-height: 150px;
            margin-bottom: 15px;
            border: 1px solid #ddd;
        }

        .home-title {
            width: 100%;
            height: 30px;
            background-color: #d5d5da;
            /*#3dcd58*/
        }

        .home-title-tab {
            width: 100px;
            height: 30px;
            float: left;
            cursor: pointer;
            background-color: #c1bdbd;
        }

        .home-title-tab.active {
            background: rgba(20, 148, 54, 1);
        }

        .home-title-tab.active .title-htb {
            color: #fff;
        }

        .home-title-tab .title-htb {
            font-size: 14px;
            line-height: 30px;
            color: #666;
            text-align: center;
        }

        .notification-panel {
            width: 100%;
            min-height: 150px;
            margin-bottom: 15px;
            border: 1px solid #ddd;
        }

        .notification-title {
            background-color: #45cb5e;
        }

        .notification-title-tab {
            width: 100px;
            height: 30px;
        }

        .notification-title-tab .title-ntb {
            font-size: 14px;
            line-height: 30px;
            color: #fff;
            text-align: center;
        }

        .content-notification .table-cn {
            width: 100%;
            table-layout: fixed;
            border-collapse: separate;
            border-spacing: 0;
        }

        .content-notification .table-cn tr {
            border: 1px solid #ddd;
        }

        .content-notification .table-cn tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        .content-notification .table-cn td {
            padding: 5px 15px;
            font-size: 14px;
            line-height: 24px;

        }

        .time-cn {
            color: #008000;
        }

        .gather-myFavorite {
            padding: 15px;
        }

        .gather-myFavorite .item-mf {
            float: left;
            width: 33.3%;
            padding: 10px;
        }

        .link-myFavorite {
            padding: 5px 10px;
            border-radius: 3px;
        }

        .link-myFavorite .iconfont {
            display: inline-block;
            width: 30px;
            height: 30px;
            font-size: 24px;
            line-height: 30px;
            text-align: center;
            color: #45cb5e;
        }

        .link-myFavorite span {
            color: #333;
            font-size: 14px;
        }

        .link-myFavorite:hover {
            background-color: #e2f3e5;
        }

        .messageWrap {
            padding: 10px;
        }

        .messageWrap .item-message {
            position: relative;
            padding: 5px 10px 5px 20px;
            border-bottom: 1px dashed #ddd;
        }

        .messageWrap .item-message .iconfont {
            position: absolute;
            top: 0;
            left: 0;
            display: inline-block;
            width: 20px;
            height: 20px;
            font-size: 18px;
        }

        .unreadColor {
            color: #ff9900;
        }

        .colorRed-mess {
            color: red;
            font-weight: 700;
        }

        .linkWrap {
            padding: 10px;
        }

        .item-link .link-globalTools {
            font-weight: 700;
            font-size: 14px;
            text-decoration: underline;
            color: #008000;
        }

        /*main样式补充 E*/
    </style>
    <div class="headerPicWrap">
        <div id="homeUserInfo">
            <img width="110" height="106" :src="userInfo.photoUrl" class="avatar"
                 th:onerror="'this.src = \'/templates/img/default.jpg\''"
                 onerror="this.src = '../templates/img/default.jpg'">
            <div style="width: 110px;text-align: center">{{userInfo.userAccount}}</div>
        </div>
    </div>
    <div class="toolGatherWrap clearfix">
        <div class="item-tg">
            <div id="myFavorite" class="home-panel">
                <div class="home-title">
                    <div class="home-title-tab active">
                        <h6 class="title-htb" th:text="#{home.my-favorite.title}">My Favorite</h6>
                    </div>
                </div>
                <div class="home-content">
                    <div class="gather-myFavorite clearfix">
                        <div class="item-mf" v-for="m in menus">
                            <div class="link-myFavorite">
                                <a href="javascript:void(0)" v-on:click="toPage(m)">
                                    <em class="iconfont" v-bind:class="m.icon"></em>
                                    <span th:text="'{{m.'+#{home.menu.name}+'}}'">{{m.nameEn}}</span>
                                </a>
                            </div>
                        </div>
                        <div class="item-mf">
                            <div class="link-myFavorite">
                                <a href="javascript:void(0)">
                                    <em class="iconfont icon-zuzhiguanli"></em>
                                    <span th:text="#{home.my-favorite.more}" v-on:click="open()">More</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="message" class="home-panel">
                <div class="home-title">
                    <div class="home-title-tab active">
                        <h6 class="title-htb" th:text="#{home.task.pending}">My Task</h6>
                    </div>
                    <div class="home-title-tab">
                        <h6 class="title-htb" th:text="#{home.task.finished}">Finished</h6>
                    </div>
                </div>
                <div class="home-content">
                    <div class="messageWrap">
                        <div class="item-message">
                            <em class="iconfont icon-_faxiaoxi unreadColor"></em>
                            <p>您有<span class="colorRed-mess">1</span>条待处理信息</p>
                        </div>
                    </div>
                </div>
            </div>
            <div id="link" class="home-panel">
                <div class="home-title">
                    <div class="home-title-tab active">
                        <h6 class="title-htb" th:text="#{home.link}">Global Tools</h6>
                    </div>
                </div>
                <div class="home-content">
                    <div class="linkWrap">
                        <div class="item-link" v-for="l in links">
                            <a v-bind:href="l.href" target="_blank" class="link-globalTools">{{l.nameCh}}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="item-tg">
            <div id="notification" class="notification-panel">
                <div class="notification-title clearfix">
                    <div class="notification-title-tab">
                        <h6 class="title-ntb" th:text="#{home.notification}">Notification</h6>
                    </div>
                </div>
                <div class="home-content">
                    <div class="content-notification">
                        <table class="table-cn">
                            <tr v-for="notify in notifies">
                                <td>
                                    <span>{{notify.content}}</span>
                                </td>
                                <td width="120px">
                                    <span class="time-cn">{{notify.notifyDate}}</span>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--修改个人资料-->
    <div id="usernewPerson">
        <el-dialog title="修改个人资料" v-model="newPersonVisible" :close-on-click-modal="false" size="small"
                   custom-class="border_dialog title_dialog" @close="close">
            <el-form ref="newPersonForm" :rules="rules" :model="form" :label-position="labelPosition"
                     label-width="100px">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-row :gutter="20">
                            <el-col :span="24">
                                <el-form-item label="姓名" prop="userName" required>
                                    <el-input v-model="form.userName" placeholder="请输入姓名"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="24">
                                <el-form-item label="账号" prop="userAccount" required>
                                    <el-input v-model="form.userAccount" placeholder="请输入账号" :disabled="true"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="头像">
                            <el-upload :auto-upload="false"
                                       accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
                                       class="avatar-uploader" action="" :show-file-list="false"
                                       :on-change="handleChange">
                                <img :src="photoUrl" class="avatar" id="avater_preview" onerror="nofindImg(this);">
                                <p>修改头像</p>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="公司电话" prop="tel">
                            <el-input v-model="form.tel" placeholder="请输入公司电话"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="SesaID" prop="wechat">
                            <el-input v-model="form.wechat" placeholder="请输入SesaID"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="手机号" prop="mobile">
                            <el-input v-model="form.mobile" placeholder="请输入手机号"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="性别" prop="gender">
                            <el-radio-group v-model="form.gender">
                                <el-radio label="1">男</el-radio>
                                <el-radio label="0">女</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="证件类型" prop="identificationTypeCode">
                            <el-select v-model="form.identificationTypeCode" placeholder="-- -- 请选择 -- --">
                                <el-option v-for="item in identificationTypeCode" :key="item.value"
                                           :label="item.label"
                                           :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="证件号码" prop="identificationNo">
                            <el-input v-model="form.identificationNo" placeholder="请输入证件号码"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="邮箱" prop="email">
                            <el-input v-model="form.email" placeholder="请输入邮箱号"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="所在部门" prop=orgInfo>
                            <div class="vanyfilter hastag" v-if="form.orgInfo">
                                <el-tag class="vany-tag zuzhi-tag" v-for="tag in orgInfo" :key="tag.id">
                                    <i class="icon iconfont tag-icon icon-zuzhi"></i>
                                    <span v-text="tag.name" class="tag-name"></span>
                                </el-tag>
                            </div>
                            <div class="vanyfilter" v-else>
                                无所在部门
                            </div>
                            <el-input v-model="form.orgList" hidden></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="save($event)" class="loading">保存</el-button>
        </span>
        </el-dialog>
    </div>
    <!--头像裁剪框-->
    <div id="userindexUserCropper">
        <el-dialog title="裁剪头像" :visible="dialogVisible" custom-class="border_dialog title_dialog" size="tiny">
            <div>
                <img id="avater_be_cropper" :src="imgSrc" style="max-width: 100%;" onerror="nofindImg(this);">
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="updateAvater(true)">确 定</el-button>
                <el-button @click="updateAvater(false)">取 消</el-button>
            </span>
        </el-dialog>
    </div>
    <!--重置密码-->
    <div id="resetPwd">
        <el-dialog v-model="resetPwdVisible" :close-on-click-modal="false" title="修改密码" size="small"
                   custom-class="border_dialog title_dialog">
            <el-form :label-position="labelPosition" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px">
                <el-form-item label="原始密码" prop="oldPassword">
                    <el-input autofocus v-model="ruleForm.oldPassword" @keyup.enter.native="submitForm('ruleForm')"
                              type="password" placeholder="请输入原始密码"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newPassword">
                    <el-input v-model="ruleForm.newPassword" @keyup.enter.native="submitForm('ruleForm')" type="password"
                              placeholder="请输入新密码"></el-input>
                </el-form-item>
                <el-form-item label="确认新密码" prop="surePassword">
                    <el-input v-model="ruleForm.surePassword" @keyup.enter.native="submitForm('ruleForm')" type="password"
                              placeholder="请再次输入新密码"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
            </div>
        </el-dialog>
    </div>
</div>
<script type="text/javascript" th:src="@{templates/base/js/jquery-3.1.1.min.js}" src="../templates/base/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" th:src="@{templates/base/bootstrap-3.3.5-dist/js/bootstrap.min.js}" src="../templates/base/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" th:src="@{templates/authority/common/js/cropper.js}" src="../templates/authority/common/js/cropper.js"></script>
<!-- vue -->
<script type="text/javascript" th:src="@{templates/base/js/vue.js}" src="../templates/base/js/vue.js"></script>
<script type="text/javascript" th:src="@{templates/base/js/vue-resource@1.3.3.js}" src="../templates/base/js/vue-resource@1.3.3.js"></script>
<script type="text/javascript" th:src="@{templates/base/js/VanyFilter.js}" src="../templates/base/js/VanyFilter.js"></script>
<!-- element-ui -->
<!-- <script src="https://unpkg.com/element-ui/lib/index.js"></script> -->
<script type="text/javascript" th:src="@{templates/base/js/index.js}" src="../templates/base/js/index.js"></script>
<script type="text/javascript" th:src="@{templates/base/js/VanyBase.js}" src="../templates/base/js/VanyBase.js"></script>
<!--头部菜单编辑插件-->
<!--<script type="text/javascript" th:src="@{templates/base/js/ourSortable.js}" src="../templates/base/js/ourSortable.js"></script>-->
<script type="text/javascript" th:src="@{templates/base/js/VanyAajx.js}" src="../templates/base/js/VanyAajx.js"></script>
<script type="text/javascript" th:src="@{templates/index/js/topnav.js}" src="../templates/index/js/topnav.js"></script>
<script type="text/javascript" th:src="@{templates/index/js/home.js}" src="../templates/index/js/home.js"></script>
<!--通用js，包含界面刚开始加载的fakeLoader效果，Alert弹出效果-->
<script type="text/javascript" th:src="@{templates/base/js/common.js}" src="../templates/base/js/common.js"></script>
<script>
    $("body").on("click", ".el-message-box__btns>button, button.loading", function (e) {
        var messageBox = $(this).closest(".el-message-box");
        if (messageBox.hasClass("ajaxMessageBox") || messageBox.hasClass("notLoadingThis")) {
            return false;
        }
        if ($(this).text().trim().indexOf("取消") < 0) {
            $(this).addClass("is-loading").prepend('<i class="el-icon-loading"></i>');
        }
    });
</script>
</body>
</html>
